<template>
	<view class="content">
		<!-- F1: 顶部LOGO -->
		<image class="logo" mode="widthFix" src="../../static/img/logo.png"/>
		<!-- F2: 手机号输入框组 -->
		<view class="input-group">
			<!-- 此处的type控制手机中弹出的键盘类型 -->
			<!-- 原生App/uni-app提供的输入框默认都是没有样式的 -->
			<input v-model="phone" type="text" placeholder="请输入手机号码"/>
			<uni-icons class="icon left" type="phone-filled" color="#009900" size="60rpx"/>
			<uni-icons class="icon right" type="clear" color="#1296DB" size="50rpx"/>
		</view>
		<!-- F3: 密码输入框组 -->
		<view class="input-group">
			<!-- password：是否是密码输入框 -->
			<input v-model="pwd" type="text" :password="hidePwd" placeholder="请输入密码"/>
			<uni-icons class="icon left" type="locked-filled" color="#090" size="60rpx"/>
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" color="#1296db" size="50rpx" @click="hidePwd = !hidePwd"/>
			<!-- 提示：事件处理时可以省略创建函数需要满足：①只有一句话  ②该句话以this开头 -->
		</view>
		<!-- F4: 登录按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- F5: 忘记密码 -->
		<navigator class="link" url="/pages/find-pwd/find-pwd" open-type="navigate">忘记密码</navigator>
		<!-- <button @click="jump">忘记密码</button> -->
		<!-- <navigator class="link" url="/pages/my/my" open-type="switchTab">用户中心</navigator> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hidePwd: true,		//是否隐藏用户输入的密码
				phone: '13501234567',	//电话号码
				pwd: '123456',		//登录密码
			}
		},
		methods: {
			async doLogin(){
				let phone = this.phone.trim()
				let pwd = this.pwd.trim()
				//验证电话是否为空、格式是否正确，如果有误则退出
				if(!phone){
					uni.showToast({
						title: '电话不能为空', 	//提示文字
						icon: 'error',			//图标
						duration: 3000,			//持续时长
					})
					return
				}
				if(!/^1[3-9]\d{9}$/.test(phone)){
					uni.showToast({
						title: '电话格式错误', 	//提示文字
						icon: 'error',			//图标
						duration: 3000,			//持续时长
					})
					return
				}
				//验证密码是否为空，如果有误则退出
				if(!pwd){
					uni.showToast({
						title: '密码不能为空',
						icon: 'error',
						duration: 3000
					})
					return
				}
				//把登录数据提交给服务器端数据API，执行异步的登录操作
				/***** GET 请求测试 ******/
				let url = 'https://www.codeboy.com/zhsqapi/user/list?pageNum=1&pageSize=10'
				let [err, res] = await uni.request({	//不给success回调，返回值就是Promise
					'url': url
				})
				if(err) {
					console.log('服务器端接口请求失败')
				}else {
					console.log(res.data)   //响应消息主体
				}
			},
			
			jump(){
				//导航跳转到“找回密码”页
				uni.navigateTo({
					url: "/pages/find-pwd/find-pwd"
				})
				
				//重定向跳转到“找回密码”页
				// uni.redirectTo({
				// 	url: "/pages/find-pwd/find-pwd"
				// })
				
				//切换页签到“用户中心”页
				// uni.switchTab({
				// 	url: "/pages/my/my"
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		width: 404rpx;
		display: block;
		margin: 90rpx auto;
	}
	.input-group {
		margin-top: $uni-spacing-col-lg;
		padding: 0  $uni-spacing-row-lg;
		position: relative;
		input {
			background-color: $uni-bg-color-grey;
			width: 100%;
			height: 104rpx;
			border-radius: $uni-border-radius-lg;
			padding: 0 88rpx;
			font-size: $uni-font-size-base;
		}
		.icon {
			position: absolute;//绝对定位的元素竖直方向上居中显示		
			top: 50%;  //此处的50%指父元素高度的一半
			transform: translateY(-50%);  //此处的50%指自身高度的一半
			&.left { left: $uni-spacing-row-base * 2; }
			&.right { right: $uni-spacing-row-base * 2; }
		}
	}
	.btn {
		// width: 100%;
		margin: $uni-spacing-col-lg*2  $uni-spacing-row-lg  0;
		background-color: $zh-theme-dark;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-lg;
		&:active {	//选中按钮被激活(即按下)时的状态
			background-color: darken($zh-theme-dark, 6%);
			//SCSS函数：darken()用于将指定的颜色变深 
		}
	}
	.link {
		color: $zh-theme-dark;
		text-align: center;
		margin-top: $uni-spacing-col-lg;
	}
</style>
